<template>
  <vxe-table
      ref="mytable"
      class="mytable"
      :stripe="tableStripe"
      :height="tableHeight"
      :header-cell-style="{height: headerHeight+'px'}"
      show-overflow
      :row-config="{height: rowHeight}"
      :seq-config="seqFunc"
      :scroll-y="{enabled:true,type: 'loop'}"
      :data="tableData">
      <vxe-column type="seq" :title="seqTitle" :width="seqWidth"></vxe-column>
      <vxe-column v-for="item in tableFields" :key="item" :field="item.field" :title="item.title"></vxe-column>
    </vxe-table>
</template>

<script setup>
import { reactive, ref, defineProps, onMounted, getCurrentInstance } from 'vue'
const ctx = getCurrentInstance()
const mytable = ref(null)
let intervalId = ref(null)
defineProps({
  tableFields: Object,
  tableScroll: Boolean,
  tableStripe: Boolean,
  tableData: Object,
  seqTitle: String,
  seqNoPre: String,
  seqWidth: Number,
  tableHeight: Number,
  headerHeight: Number,
  rowHeight: Number,
  intarvalTime: Number,
  intervalFrames: Number,
  seqNoStart: Number,
  seqNoPadLength: Number
})
const seqFunc = reactive({
  seqMethod({ rowIndex }) {
    let seqNo = String(rowIndex+ctx.props.seqNoStart).padStart(ctx.props.seqNoPadLength,'0')
    // return `${ ctx.props.seqNoPre}${rowIndex+ctx.props.seqNoStart}`
    return `${ ctx.props.seqNoPre}${seqNo}`
  }
})
const scrollTable = (obj) => {
  let scrollJuli = (ctx.props.tableData.length - Math.floor((ctx.props.tableHeight - ctx.props.headerHeight) / ctx.props.rowHeight)) * ctx.props.rowHeight
  let scrollTop = obj.$el.scrollTop
  intervalId.value = setInterval(()=>{
    if (obj && ctx.props.tableScroll) {
      // 设置新的滚动位置
      obj.$el.children[1].children[0].children[1].scrollTo(0,scrollTop)
      
      scrollTop += ctx.props.rowHeight / ctx.props.intervalFrames
      if (scrollTop>scrollJuli) {
        scrollTop = 0
      }
    }
  },ctx.props.intarvalTime / ctx.props.intervalFrames)
}
onMounted(()=>{
  // 获取当前滚动位置
  const $table = ctx.refs.mytable
  console.log($table.$el.children[1].children[0].children[1].children[2].children[1].children[11]);
  
  scrollTable($table)
})
</script>
<style lang="scss" scoped>
.mytable {
  width: 100%;
  height: 100%;
  :deep(.vxe-header--row){
    background-color: #3aaaff !important;
  }
  :deep(.vxe-body--row){
    background-color: #a2f3ff !important;
  }
  :deep(.row--stripe){
    background-color: #15d7fa !important;
  }
}

</style>